<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <!-- <div class="welcome-icon">
        <svg-icon icon-class="user" class="user-icon" />
      </div> -->
      <div class="welcome-title">欢迎回来，{{ userName }}</div>
      <div class="welcome-date">今天是 {{ currentDate }}</div>
    </div>
    <div class="background-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    userName() {
      return this.name || '管理员'
    },
    currentDate() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      return `${year}年${month}月${day}日`
    },
    randomQuote() {
      const index = Math.floor(Math.random() * this.quotes.length)
      return this.quotes[index]
    }
  }
}
</script>

<style lang="scss" scoped>
.welcome-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
}

.welcome-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.welcome-icon {
  margin-bottom: 2rem;
  
  .user-icon {
    font-size: 5rem;
    padding: 1.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-light) 0%, var(--theme) 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(42, 92, 170, 0.3);
  }
}

.welcome-title {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-date {
  font-size: 1.5rem;
  color: var(--text-secondary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.welcome-quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  padding: 0 1.5rem;
  
  &:before, &:after {
    content: '"';
    font-size: 1.5rem;
    color: var(--theme-light);
    position: absolute;
  }
  
  &:before {
    left: 0;
    top: -5px;
  }
  
  &:after {
    right: 0;
    bottom: -15px;
  }
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
}

.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(75, 139, 245, 0.3) 0%, rgba(42, 92, 170, 0.3) 100%);
  top: -100px;
  right: -50px;
  animation: float 8s ease-in-out infinite;
}

.circle-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(255, 107, 59, 0.2) 0%, rgba(255, 128, 102, 0.2) 100%);
  bottom: -50px;
  left: -50px;
  animation: float 10s ease-in-out infinite reverse;
}

.circle-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, rgba(54, 179, 126, 0.2) 0%, rgba(54, 179, 126, 0.1) 100%);
  top: 40%;
  left: 60%;
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@media (max-width: 768px) {
  .welcome-title {
    font-size: 2.5rem;
  }
  
  .welcome-date {
    font-size: 1.2rem;
  }
}
</style>
